<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>支付</title>
	<style type="text/css">
	.container-section{
		width:80%;
		margin-left:auto;
		margin-right:auto;
		padding:40px 0px;
	}
	.top-section{
		width:60%;
		margin-left:auto;
		margin-right:auto;
	}
	.progress-bar{
		width:30%;
		float:left;
		color:#0662a6;
		text-align:center;
		font-weight:bold;
		margin-right:10px;
		padding-top:15px;
		padding-bottom:15px;
		letter-spacing:1px;
		border-bottom:6px solid #dfdfdf;
	}
	.progress-primary{
		color:#0662a6;
		border-bottom:6px solid #0662a6;
	}
	.clean{
		clear:both;
	}
	.main-section{
		width:100%;
		margin-top:35px;
		padding-bottom:30px;
		background-color:#f8f8f8;
	}
	.total-section{
		color:#000;
		height:60px;
		line-height:60px;
		padding-left:50px;
		font-size:24px;
		font-weight:bold;
		background-color:#ebf3f8;
	}
	.total-account{
		padding-left:4px;
		text-decoration: underline;
	}
	.fee-info-section{
		margin-top:50px;
		margin-left:43px;
		margin-right:43px;
		border-radius:5px;
		border:1px solid #535353;
		font-family:Arial,"Microsoft YaHei";
	}
	.fee-info-section table{
		width:100%;
		color:#000;
		font-weight:bold;
		padding:12px;
	}
	.fee-info-section td{
		height:30px;
		font-size:14px;
	}
	.tip-section{
		color:#333;
		font-size:14px;
		font-family:Arial,"Microsoft YaHei";
		margin-left:18px;
		margin-right:18px;
		padding:20px 40px;
		border-bottom:1px solid #eeeeee;
	}
	.fee-name,.fee-num{
		width:10%;
	}
	.fee-desc{
		text-align:center;
		width:50%;
	}
	.fee-price,.fee-total{
		text-align:center;
		width:15%;
	}
	.fee-num{
		text-align:center;
	}
	.pay-section{
		padding-top:86px;
		padding-left:100px;
		padding-right:100px;
	}
	.pay-list{
		color:#808080;
		float:left;
		margin-right:50px;
	}
	.pay-list-primary{
       color:#0000fd;
	}
	.btn-section{
		text-align:center;
		padding-top:44px;
	}
	.btn-section div{
		margin-bottom:18px;
	}
	.btn{
		color:#fff;
		width:194px;
		height:37px;
		border:0px;
		font-weight:bold;
		font-size:18px;
	}
	.btn-red{
		background-color:#ff3937;
	}
	.btn-blue{
		background-color:#0b7bd7;
	}
	.selection-box{
		float: left;
        width: 25px;
        height: 25px;
        margin-right:8px;
		border-radius:50%;
		cursor:pointer;
		display:inline-block;
		border:1px solid #d1d1d1;
		background-position:center;
		background-repeat: no-repeat;
		background-image:url("../assets/img/circle.png");
	}
	.pay-list-selection{
		line-height:21px;
	}
	</style>
</head>
<body>
    <div class="container-section">
    	<div class="top-section">
		    <div class="progress-bar progress-primary">
		    	提交订单
		    </div>
		    <div class="progress-bar progress-primary">
		    	在线支付
		    </div>
		    <div class="progress-bar">
		    	支付完成
		    </div>
		    <div class="clean"></div>
	    </div>
	    <div class="main-section">
	    	<div class="total-section">
	    		订单总费用:￥<span class="total-account">135</span>
	    	</div>
	    	<div class="fee-info-section">
	    		<table>
	    			<thead>
	    				<tr>
	    					<td class="fee-name">费用名称</td>
	    					<td class="fee-desc">描述</td>
	    					<td class="fee-num">数量</td>
	    					<td class="fee-price">单价</td>
	    					<td class="fee-total">金额</td>
	    				</tr>
	    			</thead>
	    			<tbody>
	    				<tr>
	    					<td class="fee-name">&nbsp;</td>
	    					<td class="fee-desc">&nbsp;</td>
	    					<td class="fee-num">&nbsp;</td>
	    					<td class="fee-price">RMB</td>
	    					<td class="fee-total">RMB</td>
	    				</tr>
	    				<tr>
	    					<td class="fee-name">报关费</td>
	    					<td class="fee-desc">有50个柜加续页续柜费</td>
	    					<td class="fee-num">1</td>
	    					<td class="fee-price">100</td>
	    					<td class="fee-total">100</td>
	    				</tr>
	    				<tr>
	    					<td class="fee-name">运抵报告</td>
	    					<td class="fee-desc">&nbsp;</td>
	    					<td class="fee-num">1</td>
	    					<td class="fee-price">5</td>
	    					<td class="fee-total">5</td>
	    				</tr>
	    				<tr>
	    					<td class="fee-name">录入数</td>
	    					<td class="fee-desc">&nbsp;</td>
	    					<td class="fee-num">&nbsp;</td>
	    					<td class="fee-price">&nbsp;</td>
	    					<td class="fee-total">&nbsp;</td>
	    				</tr>
	    				<tr>
	    					<td class="fee-name">报检费</td>
	    					<td class="fee-desc">&nbsp;</td>
	    					<td class="fee-num">1</td>
	    					<td class="fee-price">30</td>
	    					<td class="fee-total">30</td>
	    				</tr>
	    			</tbody>
	    			<tfoot>
	    				<tr>
	    					<td class="fee-name">&nbsp;</td>
	    					<td class="fee-desc">&nbsp;</td>
	    					<td class="fee-num">&nbsp;</td>
	    					<td class="fee-price">合计：</td>
	    					<td class="fee-total">135</td>
	    				</tr>
	    			</tfoot>
	    		</table>
	    	</div>
	    	<div class="tip-section">
	    		如有疑问,欢迎来电咨询。报关行电话：<span class="contract-tel">0757-123456</span>
	    	</div>
	    	<div class="pay-section">
	    		<div class="pay-list pay-list-selection">
	    		    <span class="selection-box"></span>
	    		    <input type="hidden" value="1"/>
	    		    <!-- <div> -->
	    		    	余额支付（<span class="balance">￥206.03</span>）<span class="balance-tip">余额不足</span>
	    		    <!-- </div> -->
	    		</div>
	    		<div class="pay-list pay-list-primary reCharge">
	    			马上预付款
	    		</div>
	    		<div class="pay-list pay-list-primary">
	    			刷新余额
	    		</div>
	    		<div class="clean"></div>
	    	</div>
	    	<div class="btn-section">
	    	    <div>
	    	    	<button type="button" class="btn btn-red">在线支付</button>
	    	    </div>
	    	    <div>
	    	    	<button type="button" class="btn btn-blue">返回</button>
	    	    </div>
	    	</div>
	    </div>
    </div>
    <script type="text/javascript" src="../assets/js/jquery.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
            $(".selection-box").on("click",function(){
            	if(/\.png/.test($(this).css("background-image"))){
            		$(this).css("background-image",'url()').next("input").val("0");
            	}else{
                    $(this).css("background-image",'url(../assets/img/circle.png)').next("input").val("1");
            	}
            })
    	});
    </script>
</body>
</html>